<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>登录三维模型质量检测系统</title>
    <meta name="description" content="三维模型质量检测系统">
    <link href="../static/plugins/bootstrap.css" th:href="@{/plugins/bootstrap.css}" rel="stylesheet">
    <link href="../static/plugins/font-awesome.min.css" th:href="@{/plugins/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/plugins/font-awesome.css}" rel="stylesheet">

    <link href="../static/css/login/login.min.css" th:href="@{/css/login/login.min.css}" rel="stylesheet"/>



    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{/favicon.ico}"/>
    <style type="text/css">label.error {
        position: inherit;
    }</style>
    <script>
        if (window.top !== window.self) {
            window.top.location = window.location
        }
        ;
    </script>

    <link th:href="@{/plugins/bootstrap-dashen.css}" rel="stylesheet">
    <link th:href="@{/plugins/animate.css}" rel="stylesheet">
    <link th:href="@{/plugins/bootstrap-datetimepicker.min.css}" rel="stylesheet" media="screen">


</head>

<body class="signin">

<div class="signinpanel">
    <div class="row">
        <div class="col-sm-6">
            <div class="signin-info">
                <div class="logopanel m-b">
                    <h1><img alt="[ 若依 ]" src="../static/images/check/check.png" th:src="@{/images/check/check.png}">
                    </h1>
                </div>
                <div class="m-b"></div>
                <h4>欢迎使用 <strong>三维模型质量检测系统</strong></h4>
                <ul class="m-b">
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> SpringBoot</li>
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Mybatis</li>
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> SpringSecurity</li>
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Thymeleaf</li>
                    <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Bootstrap</li>
                </ul>
            </div>
        </div>
        <div class="col-sm-6">
            <form id="signupForm">
                <h4 class="no-margins">登录：</h4>
                <p class="m-t-md" th:utext="${#session.getAttribute('talkLove')}">
                </p>
                <div class="form-group">
                    <div>
                        <input type="text" name="username" class="form-control uname" placeholder="用户名"
                               value="14752109608"/>

                    </div>
                </div>
                <div class="form-group">
                    <div>
                        <input type="password" name="password" class="form-control pword" placeholder="密码"
                               value="14752109608"/>
                    </div>
                </div>


                <div class="row form-group">
                    <div class="col-xs-7">
                        <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5"
                               autocomplete="off">
                    </div>
                    <div class="col-xs-5">
                        <a href="javascript:void(0);" title="点击更换验证码">
                            <img th:src="@{/help/getVerifyCode}" class="imgcode" width="95%"/>
                        </a>
                    </div>
                </div>

                <div class="checkbox-custom" th:classappend="${captchaEnabled==false} ? 'm-t'">
                    <input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme">记住我</label>
                </div>
                <div class="form-group">
                    <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍后...">登录</button>
                </div>
                <div class="text-right">
                    <strong><a href="#">忘记密码 </a></strong>&nbsp;&nbsp;

                    <strong><a href="#" onclick="register();">立即注册 </a></strong>

                </div>

            </form>

        </div>


    </div>
    <div class="signup-footer">
        <div class="pull-left">
            &copy; 2020 All Rights Reserved. Check <br>
        </div>
    </div>

</div>
<!-- /.modal -->
<div id="registerDialog" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">
                    <i class="fa fa-sign-in"></i>&nbsp;用户注册
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal mar_t15" name="registerForm" id="registerForm"
                      enctype="multipart/form-data" method="post">

                    <div class="form-group">
                        <label for="userInfo_user_name_header" class="col-md-3 text-right">昵称:</label>
                        <div class="col-md-8">
                            <input type="text" id="userInfo_user_name_header"
                                   name="userInfo.userName" class="form-control"
                                   placeholder="请输入昵称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="userInfo_user_tel_header" class="col-md-3 text-right">联系电话:</label>
                        <div class="col-md-8">
                            <input type="text" id="userInfo_user_tel_header"
                                   name="userInfo.userTel" class="form-control"
                                   placeholder="请输入联系电话">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="userInfo_user_tel_header" class="col-md-3 text-right">验证码:</label>
                        <div class="col-md-8">
                            <div class="input-group" style="z-index: 9999">
                                <input type="hidden" id="userSmsTel">
                                <input id="userSms" name="userSms" type="text" class="form-control"
                                       placeholder="请输入短信验证码">
                                <span class="input-group-btn">
										<button id="userSmsSend" class="btn btn-default" type="button">获取验证码</button>
									</span>
                            </div>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="userInfo_user_pwd_header" class="col-md-3 text-right">登录密码:</label>
                        <div class="col-md-8">
                            <input type="password" id="userInfo_user_pwd_header" name="userInfo.userPwd"
                                   class="form-control" placeholder="密码由6-20个字母、数字、下划线组成">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword_header" class="col-md-3 text-right">确认密码:</label>
                        <div class="col-md-8">
                            <input type="password" id="confirmPassword_header" name="userInfo.confirmPassword"
                                   class="form-control" placeholder="确认密码">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="userInfo_user_email_header" class="col-md-3 text-right">电子邮箱:</label>
                        <div class="col-md-8">
                            <input type="text" id="userInfo_user_email_header" name="userInfo.userEmail"
                                   class="form-control" placeholder="xxx.xx@example.com">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="userInfo_user_birthdayDiv_header" class="col-md-3 text-right">出生日期:</label>
                        <div class="col-md-8">
                            <div id="userInfo_user_birthdayDiv_header"
                                 class="input-group date userInfo_user_birthday col-md-12"
                                 data-link-field="userInfo_birthday"
                                 data-link-format="yyyy-mm-dd">

                                <input class="form-control" id="userInfo_user_birthday_header"
                                       name="userInfo.userBirthday" size="16" type="text" value=""
                                       placeholder="请选择出生日期" readonly>

                                <span class="input-group-addon">
											<span class="glyphicon glyphicon-remove">
											</span>
										</span>
                                <span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar">
											</span>
										</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="userInfo_user_sex_header" class="col-md-3 text-right">性别:</label>
                        <div class="col-md-8" id="userInfo_user_sex_header" name="userInfo_user_sex_header">
                            <label class="radio-inline">
                                <input type="radio" value='1' checked name="userInfo.userSex"/>男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="0" name="userInfo.userSex"/> 女
                            </label>


                        </div>

                    </div>

                    <div class="form-group">
                        <label for="userInfo_user_address_header" class="col-md-3 text-right">家庭地址:</label>
                        <div class="col-md-8">
                            <input type="text" id="userInfo_user_address_header" name="userInfo.userAddress"
                                   class="form-control" placeholder="请输入家庭地址">
                        </div>
                    </div>
                </form>


                <style>
                    #bookTypeAddForm .form-group {
                        margin-bottom: 10px;
                    }
                </style>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary"
                        onclick="ajaxRegister();">注册
                </button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<script th:inline="javascript">
    var ctx = [[@{/}]];
        var captchaType = [[${captchaType}]];
</script>
<!-- 全局js -->
<script src="../static/plugins/jquery.min.js" th:src="@{/plugins/jquery.min.js}"></script>
<script src="../static/plugins/bootstrap.js" th:src="@{/plugins/bootstrap.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js"
        th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js"
        th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/plugins/bootstrapvalidator/js/bootstrapValidator.min.js}"></script>
<script src="../static/check/js/check-ui.js" th:src="@{/check/js/check-ui.js?v=4.1.0}"></script>


<script th:src="@{/plugins/wow.min.js}"></script>
<script th:src="@{/plugins/bootstrap-datetimepicker.min.js}" type="text/javascript" charset="UTF-8"></script>
<script th:src="@{/plugins/locales/bootstrap-datetimepicker.zh-CN.js}" type="text/javascript" charset="UTF-8"></script>

<script th:inline="javascript">

    var basePath = [[@{/}]];

    /*发送登录请求*/
    function login() {
        /*登录之前要先验证表单数据*/
        $("#signupForm").data('bootstrapValidator').validate();
        if (!$("#signupForm").data('bootstrapValidator').isValid()) {
            $.modal.msg("请正确输入登录信息！");
            return;
        }
        $.modal.loading($("#btnSubmit").data("loading"));
        var username = $.common.trim($("input[name='username']").val());
        var password = $.common.trim($("input[name='password']").val());
        var validateCode = $("input[name='validateCode']").val();
        var rememberMe = $("input[name='rememberme']").is(':checked');
        $.ajax({
            type: "post",
            url: basePath + "UserInfo/frontLogin",
            data: {
                "username": username,
                "password": password,
                "validateCode": validateCode,
                "rememberMe": rememberMe
            },
            success: function (r) {
                if (r.success) {
                    console.log(r)

                    $.modal.closeLoading();
                    $('.imgcode').click();
                    $(".code").val("");
                    $.modal.msg(r.message);
                    location.href = basePath + 'index';
                } else {
                    $.modal.closeLoading();
                    $('.imgcode').click();
                    $(".code").val("");
                    $.modal.msg(r.message);
                    /*清空验证码校验---再次登录仍然需要校验*/

                    //loginFormValidator();

                    //location.href = basePath + '/login';
                }
            }
        });
    };

    /*注册页面*/
    function register() {
        $("#registerDialog input").val("");
        //为单选按钮赋值
        $("#userInfo_user_sex_header :radio:first").val("1");
        $("#userInfo_user_sex_header :radio:last").val("0");
        $("#registerDialog textarea").val("");
        $("#registerDialog img").attr("src", "");
        $('#registerDialog').modal('show');
    };


    //提交添加用户信息
    function ajaxRegister() {
        //提交之前先验证表单
        $("#registerForm").data('bootstrapValidator').validate();

        if (!$("#registerForm").data('bootstrapValidator').isValid()) {
            return;
        }
        jQuery.ajax({
            type: "post",
            url: basePath + "UserInfo/add",
            dataType: "json",
            data: new FormData($("#registerForm")[0]),
            processData: false,   // jQuery不要去处理发送的数据
            contentType: false,
            success: function (obj) {
                if (obj.success) {
                    alert(obj.message);
                    $("#registerForm").find("input").val("");
                    $("#registerForm").find("textarea").val("");
                    $('#registerDialog').modal('hide');
                    window.location.href = basePath;

                } else {

                    alert(obj.message);
                }
            }
        });
    };

    $(function () {
        $("#btnSubmit").click(function () {

            login();
            /**解决登录失败后--表单没有重新验证的问题*/
            $("#signupForm").data('bootstrapValidator').destroy();
            $('#signupForm').data('bootstrapValidator', null);
            loginFormValidator();
        });
        //键盘回车---实现登录
        $("#signupForm").keydown(function(event){
            if(event.keyCode ==13){

                $("#btnSubmit").click();

            }
        });


        /*验证码点击事件*/
        $('.imgcode').click(function () {

            var src = basePath + "help/getVerifyCode?" + new Date().getTime(); //加时间戳，防止浏览器利用缓存
            $(".imgcode").attr("src", src);
            $(".code").val("");

        });
        /*登录表单验证*/
        loginFormValidator();
        function loginFormValidator() {
            //验证登录输入loginDialog
            $('#signupForm').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon',
                    invalid: 'glyphicon',
                    validating: 'glyphicon'
                },
                fields: {
                    "username": {
                        validators: {
                            notEmpty: {
                                message: "联系电话不能为空",
                            },
                            regexp: {
                                regexp: /^1(3|4|5|6|7|8|9)\d{9}$/,
                                message: '电话格式不正确'
                            }
                        }
                    },
                    "password": {
                        validators: {
                            notEmpty: {
                                message: "登录密码不能为空",
                            },
                            regexp: {
                                regexp: /^(\w){6,20}$/,
                                message: '密码只能由6-20个字母、数字、下划线组成'
                            }
                        }
                    },
                    "validateCode": {
                        validators: {
                            notEmpty: {
                                message: "验证码不能为空",
                            }, stringLength: {
                                min: 4,
                                max: 4,
                                message: '请输入四位验证码'
                            },
                            remote: {
                                //发起Ajax请求。
                                url: basePath + "UserInfo/checkAuthCode",//验证地址
                                data: {checkcode: $('input[name="validateCode"]').val()},
                                message: '验证码错误',//提示消息
                                delay: 500,//设置输入字符0.5秒发起验证
                                type: 'POST' //请求方式
                            }
                        }
                    }
                }
            });
        };

        /*注册表单验证*/
        registerFormValidator();
        //解决注册表单叉掉后，保持验证状态
        $('#registerDialog').on('hidden.bs.modal', function () {
            $("#registerForm").data('bootstrapValidator').destroy();
            $('#registerForm').data('bootstrapValidator', null);
            registerFormValidator();
        });

        /*发送短信验证码*/
        $("#userSmsSend").click(function () {
            var tel = $("#userInfo_user_tel_header").val();
            $.ajax({
                url: basePath + "UserInfo/sendSms",
                type: 'get',
                dataType: "json",
                data: {
                    "userTel": tel,
                },
                success: function (obj, response, status) {
                    //console.log(obj);
                    if (obj.success) {
                        $("#userSmsSend").removeClass("btn-default");
                        $("#userSmsSend").addClass("btn-success");
                        $("#userSmsSend").text("五分钟内有效");
                        $("#userSmsTel").val(tel);
                    } else {
                        alert(obj.message);
                    }
                }
            });

        });
        new WOW().init();

        //验证用户添加表单字段
        function registerFormValidator() {

            $('#registerForm').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {

                    "userInfo.userName": {
                        validators: {
                            notEmpty: {
                                message: "昵称不能为空",
                            }
                        }
                    }, "userInfo.userTel": {
                        validators: {
                            notEmpty: {
                                message: "联系电话不能为空",
                            },
                            regexp: {
                                regexp: /^1(3|4|5|6|7|8|9)\d{9}$/,
                                message: '电话格式不正确'
                            }
                        }
                    },
                    "userSms": {
                        validators: {
                            notEmpty: {
                                message: "验证码不能为空",
                            }, stringLength: {
                                min: 4,
                                max: 4,
                                message: '请输入四位验证码'
                            },
                            threshold: 3,
                            remote: {
                                //发起Ajax请求。
                                url: basePath+"/UserInfo/checkSmsCode",//验证地址
                                data: function (validator) {
                                    return {
                                        userTel: $("#userInfo_user_tel_header").val(),
                                        checkCode: $("#userSms").val()//
                                    };
                                },
                                message: '验证码错误',//提示消息
                                delay: 1000,//设置1秒发起名字验证
                                type: 'POST' //请求方式
                            }
                        }
                    },
                    "userInfo.userPwd": {
                        validators: {
                            notEmpty: {
                                message: "登录密码不能为空",
                            },
                            regexp: {
                                regexp: /^(\w){6,20}$/,
                                message: '密码只能由6-20个字母、数字、下划线组成'
                            }
                        }
                    },
                    "userInfo.confirmPassword": {
                        validators: {
                            notEmpty: {
                                message: "验证密码不能为空",
                            },
                            regexp: {
                                regexp: /^(\w){6,20}$/,
                                message: '密码只能由6-20个字母、数字、下划线组成'
                            }, identical: {
                                field: 'userInfo.userPwd',
                                message: '2次密码不一致'
                            }
                        }
                    },
                    "userInfo.userEmail": {
                        validators: {
                            notEmpty: {
                                message: "电子邮箱不能为空",
                            },
                            regexp: {
                                regexp: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
                                message: '电子邮箱格式不正确'
                            }
                        }
                    },

                    "userInfo.userBirthday": {
                        validators: {
                            notEmpty: {
                                message: "出生日期不能为空",
                            }
                        }
                    },
                    "userInfo.userAddress": {
                        validators: {
                            notEmpty: {
                                message: "家庭地址不能为空",
                            }
                        }
                    },
                }
            });
        };

        //出生日期组件
        $('#userInfo_user_birthdayDiv_header').datetimepicker({
            language: 'zh-CN',  //显示语言
            format: 'yyyy-mm-dd',
            minView: 2,
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            minuteStep: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0
        }).on('hide', function (e) {
            //下面这行代码解决日期组件改变日期后不验证的问题
            $('#registerForm').data('bootstrapValidator').updateStatus('userInfo.userBirthday', 'NOT_VALIDATED', null).validateField('userInfo.userBirthday');
        });
    });
</script>
</body>
</html>
